<template>
    <div class="box-data">
        <div class="box-data-title">
            <div>
                <span>1</span>
                <span>步骤一</span>
            </div>
            <div>
                <span>2</span>
                <span>步骤二</span>
            </div>
            <div>
                <span>3</span>
                <span>步骤三</span>
            </div>
        </div>
        <div class="box-data-input">
            <div class="box-data-text">以下为考试安排的基本信息：</div>
            <el-form ref="form" :model="formList" label-width="100px">
                <div class="form">
                    <span class="icon">*</span>
                    <el-form-item label="考试场地：">
                        <el-input v-model="formList.address" style="width: 500px; height: 32px;"></el-input>
                    </el-form-item>
                </div>
                <div class="form">
                    <span class="icon">*</span>
                    <el-form-item label="参考班级：">
                        <el-input v-model="formList.class" style="width: 100px; height: 32px;"></el-input>
                    </el-form-item>
                    <span class="text">（*默认被选择班级的全体学生参考）</span>
                </div>
                <div class="form">
                    <el-form-item label="不参考人员：" >
                        <el-input v-model="formList.staff" style="width: 100px; height: 32px;"></el-input>
                    </el-form-item>
                    <span class="text">（*如有学生不参加本次考试，请筛选出来</span>
                </div>
                <div class="form">
                    <span class="icon">*</span>
                    <el-form-item label="监考老师：">
                        <el-input v-model="formList.address" style="width: 180px; height: 32px;"></el-input>
                    </el-form-item>
                    <span class="text1">+新增老师</span>
                </div>
                <div class="form">
                    <el-button @click="to()">下一步</el-button>
                </div>

                <div class="display-view" id="display-view">
                    <div class="form">
                        <span class="icon">*</span>
                        <el-form-item label="考试场地：">
                            <el-input v-model="formList.address" style="width: 500px; height: 32px;"></el-input>
                        </el-form-item>
                    </div>
                    <div class="form">
                        <span class="icon">*</span>
                        <el-form-item label="参考班级：">
                            <el-input v-model="formList.class" style="width: 100px; height: 32px;"></el-input>
                        </el-form-item>
                        <span class="text">（*默认被选择班级的全体学生参考）</span>
                    </div>
                    <div class="form">
                        <el-form-item label="不参考人员：" >
                            <el-input v-model="formList.staff" style="width: 100px; height: 32px;"></el-input>
                        </el-form-item>
                        <span class="text">（*如有学生不参加本次考试，请筛选出来</span>
                    </div>
                    <div class="form">
                        <span class="icon">*</span>
                        <el-form-item label="监考老师：">
                            <el-input v-model="formList.address" style="width: 180px; height: 32px;"></el-input>
                        </el-form-item>
                        <span class="text1">+新增老师</span>
                    </div>
                </div>

                <div class="form">
                    <el-button @click="displayView()" style="width: 100%; height: 40px; background-color: rgb(29, 154, 212); color: #FFF;">+新增考试对象</el-button>
                </div>

            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 路由全局实例
const route = useRoute();
const router = useRouter();

const formList = reactive({
    address: '',
    class: '+班级',
    staff: '+人员'
})

const to = () => {
    router.push('/add/addpagesecond');
}

const displayView = () => {
    document.getElementById('display-view').style.display = 'block';
}

</script>

<style scoped>
.box-data {
    width: 90%;
    margin: auto;
    margin-top: 80px;
}

.box-data-title {
    width: 100%;
    height: 40px;
    border: 1px solid #E5E5E5;
    display: flex;
    background-color: #FCFCFC;
}

.box-data-title>div {
    width: 120px;
    height: 40px;
    line-height: 40px;
    background: url("https://cloud.axureshop.com/gsc/TSQB8L/1b/91/9d/1b919dca1aa14201b597401657ba6197/images/手动组卷/1_u5021_selected.svg?token=88aec3ab56f5992a46e7d43207af97bc73c464bce1235dc632d12b97063110f4") no-repeat;
    background-size: cover;
    text-align: center;
    background-color: #FCFCFC;
}

.box-data-title>div:nth-child(2) {
    margin-left: -18px;
    background: url("https://cloud.axureshop.com/gsc/TSQB8L/1b/91/9d/1b919dca1aa14201b597401657ba6197/images/手动组卷/2_u5022.svg?token=5e7efd2ba76aaa83fd1e16826091828f34d15531b2f6784891de93abf3a43b28") no-repeat;
}


.box-data-title>div:nth-child(3) {
    margin-left: -18px;
    background: url("https://cloud.axureshop.com/gsc/TSQB8L/1b/91/9d/1b919dca1aa14201b597401657ba6197/images/手动组卷/2_u5022.svg?token=5e7efd2ba76aaa83fd1e16826091828f34d15531b2f6784891de93abf3a43b28") no-repeat;
}

.box-data-title>div>span:nth-child(1) {
    display: inline-block;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    background-color: rgb(29, 154, 212);
    margin-right: 10px;
    text-align: center;
}

.box-data-title>div>span:nth-child(2) {
    font-size: 14px;
    color: rgb(29, 154, 212);
}

.box-data-title>div:nth-child(1)>span:nth-child(1),
.box-data-title>div:nth-child(3)>span:nth-child(1) {
    color: #666666;
    background-color: #CCCCCC;
}

.box-data-title>div:nth-child(1)>span:nth-child(2),
.box-data-title>div:nth-child(3)>span:nth-child(2) {
    color: #666666;
}

.box-data-input {
    margin-left: 30px;
}

.box-data-text {
    font-size: 14px;
    color: #666666;
    margin-top: 20px;
}

.text {
    font-size: 14px;
    color: #666666;
    line-height: 30px;
    margin-left: 10px;
}

.text1 {
    font-size: 14px;
    color: rgb(29, 154, 212);
    line-height: 30px;
    margin-left: 10px;
}


.form {
    height: 40px;
    display: flex;
    margin-top: 20px;
}

.icon {
    color: red;
    font-size: 28px;
}

.display-view {
    margin-top: 20px;
    border-top: 1px solid #333333;
    display: none;
}
</style>